
{% assign blockId = block_id | default : section.block_id %}
<style>
	.section-contact-us-body{


		color:var(--text-color);
		/* padding:0 15px; */
	}

	.section-contact-us-body-{{blockId}}{
		{% if section.settings.wap_background_image.src != "" %}
			background: url({{section.settings.wap_background_image.src}}) no-repeat;
			background-size: cover;
  		background-position: center;
		{% else %}
		  background-color: var(--bg_color);
		{% endif %}
	}
	.section-contact-us-body .block_title{
		padding: 30px 0;
		margin-bottom: 0;
	}
	.section-contact-us-body .block_title h2{
		color:var(--text-color);
		max-width: 880px;
		margin: 0 auto;
		text-align: center;
	}
	.section-contact-us-body .block_title .block_detail{
		color:var(--text-color);
		opacity:.6;
		text-align: center;
		margin-top:10px;

	}
	.contact-us-slide{
		display: flex;
		flex-wrap: wrap;
		row-gap: 30px;
	}
	.contact-us-slide .swiper-slide{
		width: 50%;
		height:auto;
	}
	.contact-us-slide .contact-us-slide-item{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24px;
		position: relative;
		padding:0 10px;
		box-sizing: border-box;
		color: var(--text-color);
	}
	.contact-us-slide .contact-us-slide-item .slide-item-content {
		-webkit-text-fill-color: var(--text-color);
	}
	.contact-us-slide .contact-us-slide-item svg {
		width: var(--icon-size) !important;
		height: var(--icon-size) !important;
	}
	.contact-us-slide .contact-us-slide-item img {
		width: var(--icon-size) !important;
		height: var(--icon-size) !important;
		object-fit: cover;
	}
	.contact-us-slide .contact-us-slide-item svg {
		width: var(--icon-size) !important;
		height: var(--icon-size) !important;
	}
	.contact-us-slide .contact-us-slide-item img {
		width: var(--icon-size) !important;
		height: var(--icon-size) !important;
		object-fit: cover;
	}

	.contact-us-slide .contact-us-slide-item .slide-item-name{
		font-size: 14px;
		opacity:.8;
		text-align: center;
		margin-top:8px;

	}
	.contact-us-slide .contact-us-slide-item .slide-item-content{
		font-size: 14px;
		text-align: center;
		font-weight: bold;
		margin-top:5px;
		width: 100%;

	}
	.section_container{
		width: 100%;
    max-width: var(--general_layout_width);
    margin: 0 auto;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}

	.contact-us-slide .swiper-slide:nth-child(2n)::after{
		position: absolute;
		left:1px;
		top:50%;
		height:60px;
		margin-top:-30px;
		background-color: var(--text-color);
		width: 1px;
		opacity: 0.2;
		content: "";
	}


	.contact-us-slide .swiper-slide:last-child:after{
		position: absolute;
		right: 1px;
		top:50%;
		height:60px;
		margin-top:-30px;
		background-color: var(--text-color);
		width: 1px;
		opacity: 0.2;
		content: "";
	}

	.contact-us-swiper{
		flex: 1;
		overflow: hidden;
	}
	.contact-us-swiper-container{
		padding: 0 0 30px 0;
		display: flex;
		position: relative;
	}
	.contact-us-swiper-container .brand-next,.brand-prev{
		display: none;
	}
	@media (min-width: 768px) {
		.section-contact-us-body .block_title{
			padding: 40px 0;
		}
		.contact-us-swiper-container .brand-next,.brand-prev path{
			fill: var(--text-color);
		}
		.contact-us-swiper-container{
			padding: 0 0 40px 0;
			position: relative;
		}
		.section-contact-us-body-{{blockId}}{
			{% if section.settings.background_image.src != "" %}
				background: url({{section.settings.background_image.src}}) no-repeat;
				background-size: cover;
  			background-position: center;
			{% else %}
				background: var(--bg_color);
			{% endif %}
		}
		.contact-us-slide{
			row-gap: 0;
		}
		{% if section.blocks.size <= 5 %}
			.section-contact-us-body-{{blockId}} .contact-us-slide .swiper-slide{
			 flex:1; 
		}
		{% endif %}

		.section_container{
			padding-left: 0;
			padding-right: 0;
		}
		.contact-us-slide .swiper-slide + .swiper-slide::after{
			position: absolute;
			left:1px;
			top:50%;
			height:60px;
			margin-top:-30px;
			background-color: var(--text-color);
			width: 1px;
			opacity: 0.2;
			content: "";
		}

		.contact-us-swiper-container .brand-next,.brand-prev{
			padding: 0 10px;
			display: flex;
			z-index: 100;
			align-items: center;
			cursor: pointer;
		}
	
		.contact-us-swiper-container .contact-us-slide{
			flex-wrap: nowrap;
		}
		.contact-us-swiper-container .swiper-button-disabled path{	
			opacity:0.6
		}
	}

	.full_section_container{
		width: 100%;
	}

</style>
{%- capture container -%}
{% if section.settings.full_screen %}full_section_container{% else %}section_container{% endif %}
{%- endcapture -%}


<div class="section-contact-us {{container}}" style="--bg_color:{{section.settings.background_color}};--text-color:{{section.settings.text_color}};">
	<div class="section-contact-us-body section-contact-us-body-{{blockId}}">
		<div style='background-color:rgba(0,0,0,{{section.settings.mask | divided_by : 100}})'>
			<div class="container_wrapper" style="--icon-size: {{ section.settings.icon_size }}px;">
				{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}
				<div class="contact-us-swiper-container">
					{% if section.blocks.size > 5 %}
						<div class="brand-prev" id="block_prev_{{ blockId  }}">{% include 'icon_silde_left' ,width:'16',height:'16' %}</div>
					{% endif %}

					<div id="contact-us-{{blockId}}" class="contact-us-swiper">
						<div class="contact-us-slide swiper-wrapper" >
							{% for block in section.blocks %}
								<div class="swiper-slide">
									<div class="contact-us-slide-item">
										{%- if block.image.src != "" -%}
											<img data-src="{{ block.image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ block.image.alt}}"  style="width:18px;height:18px" />
										{%- else -%}
											{% include 'contact_us_icon', icon:block.icon %}
										{%- endif -%}
										{%- if block.title -%}
											<div class="slide-item-name">{{block.title}}</div>
										{%- endif -%}
										{%- if block.content -%}
											<div class="slide-item-content">{{block.content}}</div>
										{%- endif -%}
									</div>
								</div>
								
							{% endfor %}
					
						</div>
					</div>
					{% if section.blocks.size > 5 %}
						<div class="brand-next" id="block_next_{{ blockId  }}">{% include 'icon_silde_right' ,width:'16',height:'16' %}</div>
					{% endif %}
				</div>

			</div>
		</div>

	</div>

</div>



<script>

	$(function(){
		if(!moi.isMobile()){
			new Swiper("#contact-us-{{ blockId }}", {
				slidesPerView: 5,
				spaceBetween: 0,
				navigation: {
						nextEl: "#block_next_{{ blockId  }}",
						prevEl: "#block_prev_{{ blockId  }}"
				},
				
				breakpoints: {
						768: {
								slidesPerView: 2,
								spaceBetween: 20,
								pagination: {
									el: "#pagination_{{ blockId  }}"
								}
						}
				},
				on: {
						init: function (swiper) {
						}
				}
			});
		}
		
	})
</script>

{% schema %}
{
	"tag": "section",
	"class": "block_contact_us",
	"is_global": false,
	"name": {
		"zh_CN": "联系我们",
		"en_US": "Contact us"
	},
	"max_blocks": 10,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"id": "full_screen",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"default": true
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Contact US"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Welcome to contact us! If you have any questions or suggestions, please feel free to get in touch with us."
		},
		{
			"type": "card_image",
			"id": "background_image",
			"label": {
				"zh_CN": "电脑端背景图片",
				"en_US": "PC Background image"
			},
			"info": {
				"zh_CN": "尺寸建议：2400*656;未传将按背景颜色显示;",
				"en_US": "Recommended size: 2400*656;No transfer will be displayed in the background color"
			},
			"default": {
				"src": "https://cn01-cdn.staticsyy.com/uploads/24073/cart/resources/20230620/abf5a8986271c63e378a61d900ffc20a.png",
				"alt": ""
			}
		},
    {
			"type": "card_image",
			"id": "wap_background_image",
			"label": {
				"zh_CN": "移动端背景图片",
				"en_US": "wap ackground image"
			},
			"info": {
				"zh_CN": "尺寸建议：1242*1138;未传将按背景颜色显示",
				"en_US": "Recommended size: 1242*1138;No transfer will be displayed in the background color"
			},
			"default": {
				"src": "https://cn01-cdn.staticsyy.com/uploads/24073/cart/resources/20230620/1631d3271aab46d414f87de84528408a.png",
				"alt": ""
			}
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "蒙层不透明度",
				"en_US": "Mask opacity"
			},
			"id": "mask",
			"max": "100",
			"min": "0",
			"default": 50
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "图标大小"
			},
			"id": "icon_size",
			"max": 56,
			"min": 24,
			"unit": "px",
			"default": 24
		},
		{
			"type": "card_color",
			"id": "background_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"default": "#F6F6F6"
		},
	
		{
			"type": "card_color",
			"id": "text_color",
			"label": {
				"zh_CN": "主题颜色",
				"en_US": "Theme color"
			},
			"default": "#1D1F21"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "联系我们",
				"en_US": "Contact us"
			},
			"type": "contact-us-items",
			"settings": [
				{
					"type": "card_select",
					"label": {
						"zh_CN": "选择图标",
						"en_US": "Select icon"
					},
					"id": "icon",
					"option": [
						{
							"label": {
								"zh_CN": "电话",
								"en_US": "Tel"
							},
							"value": "Tel",
							"icon": "shopyyicon-Tel"
						},
					
						{
							"label": {
								"zh_CN": "邮箱",
								"en_US": "Email"
							},
							"value": "Email",
							"icon": "shopyyicon-Email"
						},
						{
							"label": {
								"zh_CN": "Skype",
								"en_US": "Skype"
							},
							"value": "Skype",
							"icon": "shopyyicon-Skype"
						},
						{
							"label": {
								"zh_CN": "WhatsApp",
								"en_US": "WhatsApp"
							},
							"value": "WhatsApp",
							"icon": "shopyyicon-WhatsApp"
						},
						{
							"label": {
								"zh_CN": "Messenger",
								"en_US": "Messenger"
							},
							"value": "Messenger",
							"icon": "shopyyicon-Messenger"
						},
						{
							"label": {
								"zh_CN": "QQ",
								"en_US": "QQ"
							},
							"value": "QQ",
							"icon": "shopyyicon-QQ"
						},
						{
							"label": {
								"zh_CN": "Wechat",
								"en_US": "Wechat"
							},
							"value": "Wechat",
							"icon": "shopyyicon-Wechat"
						},
						{
							"label": {
								"zh_CN": "Line",
								"en_US": "Line"
							},
							"value": "Line",
							"icon": "shopyyicon-Line"
						},
						{
							"label": {
								"zh_CN": "Instagram",
								"en_US": "Instagram"
							},
							"value": "Instagram",
							"icon": "shopyyicon-Instagram"
						},
						{
							"label": {
								"zh_CN": "Telegram",
								"en_US": "Telegram"
							},
							"value": "Telegram",
							"icon": "shopyyicon-Telegram"
						},
						{
							"label": {
								"zh_CN": "位置",
								"en_US": "Location"
							},
							"value": "Location",
							"icon": "shopyyicon-Location"
						},
						{
							"label": {
								"zh_CN": "营业时间",
								"en_US": "Time"
							},
							"value": "Time",
							"icon": "shopyyicon-Time1"
						}
					],
					"default": "Tel"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "上传图标",
						"en_US": "Upload icon"
					},
					"info": {
						"zh_CN": "尺寸建议48*48px",
						"en_US": "Size suggested 48*48px"
					},
					"id": "image",
					"default": {
						"src": "",
						"alt": ""
					}
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "type"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "内容",
						"en_US": "Content"
					},
					"id": "content",
					"default": "content"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Contact US",
			"detail": "Welcome to contact us! If you have any questions or suggestions, please feel free to get in touch with us.",
			"full_screen":false,
			"background_image": {
				"src": "https://cn01-cdn.staticsyy.com/uploads/24073/cart/resources/20230620/abf5a8986271c63e378a61d900ffc20a.png",
				"alt": ""
			},
			"wap_background_image":{
				"src": "https://cn01-cdn.staticsyy.com/uploads/24073/cart/resources/20230620/1631d3271aab46d414f87de84528408a.png",
				"alt": ""
			},
			"mask":50,
			"icon_size": 24,
			"background_color": "#F6F6F6",
			"text_color": "#ffffff"
		},
		"blocks": [
			{
				"block_type":"contact-us-items",
				"icon": "Tel",
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Phone number",
				"content": "12345678911"
			},
			{
				"block_type":"contact-us-items",
				"icon": "Email",
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Email",
				"content": "xxx@abc.com"
			},
			{
				"block_type":"contact-us-items",
				"icon": "Skype",
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Skype",
				"content": "exampleusername"
			},
			{
				"block_type":"contact-us-items",
				"icon": "Time",
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Business hours",
				"content": "9:00 AM to 6:00 PM"
			}
		]
	},
	"icon": "icon-dianhua"
}
{% endschema %}